<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>book-add</title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
	</head>
	<body>
		<div class="layui-container" style="margin-top: 10px;">
			<div class="layui-row">
				<div class="layui-col-md9 layui-col-md-offset1">
					<form class="layui-form">
					  <div class="layui-form-item">
					    <label class="layui-form-label">书名</label>
					    <div class="layui-input-block">
					      <input type="text" name="bookName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">作者</label>
					    <div class="layui-input-block">
					      <input type="text" name="authorName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">价格</label>
					    <div class="layui-input-block">
					      <input type="text" name="price" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">种类</label>
					    <div class="layui-input-block">
					      <select name="categoryId" id="category"></select>
					    </div>
					  </div>  
					  <div class="layui-form-item">
					    <label class="layui-form-label">上架/下架</label>
					    <div class="layui-input-block">
					      <input type="radio" name="status" value="1" title="上架" checked>
					      <input type="radio" name="status" value="0" title="下架">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">创建时间</label>
					    <div class="layui-input-block">
					      <input type="text" class="layui-input" id="createTime" placeholder="yyyy/MM/dd HH:mm:ss" name="createTime">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">缩略图</label>
					    <div class="layui-input-block">
					      <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
					        <i class="layui-icon layui-icon-upload"></i> 
					        <div>点击上传，或将文件拖拽到此处</div>
					        <div class="layui-hide" id="ID-upload-demo-preview">
					          <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
					        </div>
					      </div>
					    </div>
						<!-- 隐藏域 -->
						<input type="hidden" name="bookAddress" id="bookAddress">
						<input type="hidden" name="bookUrl" id="bookUrl">
					  </div>
					  <div class="layui-form-item">
					    <div class="layui-input-block" style="text-align: right;">
					      <button type="submit" class="layui-btn" lay-submit lay-filter="add">提交</button>
					      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					    </div>
					  </div>
					</form>
				</div>
			</div>
		</div>
		
		<script src="layui/layui.js"></script>
		<script>
			
			layui.use(function(){
				let laydate = layui.laydate;
				let $ = layui.$;
				let layer = layui.layer;
				let form = layui.form;
				let upload = layui.upload;
				
				form.on('submit(add)', function(obj){
					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8080/addBook',
						data: JSON.stringify(obj.field),
						contentType: 'application/json',
						dataType: 'json',
						success: function(res){
							if(res.code==0){
								// 在iframe页面中关闭自身
								// 关闭弹出层执行弹出层end中的回调方法
								let index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							}else{
								layer.msg('添加失败');
							}
						}
					});
					// 阻止表单的默认提交行为，即使删除了action，浏览器还是会尝试提交表单到action，action=""则会提交到当前页面，
					// 浏览器自动提交会导致页面刷新(action="")或跳转(action)，js逻辑会被中断，return false可以阻止这一行为
					return false;
				});
				
				upload.render({
					elem: '#ID-upload-demo-drag',
					url: 'http://127.0.0.1:8080/uploadFile',
					done: function(res){
						$('#ID-upload-demo-preview').removeClass('layui-hide').find('img').attr('src', 'http://127.0.0.1:8080'+res.data.bookUrl);
						$('#bookUrl').val(res.data.bookUrl);
						$('#bookAddress').val(res.data.bookAddress);
					}
				});
				
				$.getJSON("http://127.0.0.1:8080/getCategoryList", function(data){
					if(data.code==0){
						let books = data.data;
						if(books && books.length>0){
							let s='<option value=""></option>';
							for (let i = 0; i < books.length; i++) {
								s += '<option value="'+books[i].categoryId+'">'+books[i].categoryName+'</option>';
							}
							$('#category').html(s);
							// form.render('select')的参数是哪一个元素，不是id
							form.render('select');
						}
					}else{
						layer.msg('获取图书种类失败');
					}
				});
				
				laydate.render({
					elem: '#createTime',
					type: 'datetime',
					value: new Date(),
					// 默认格式yyyy-MM-dd HH:mm:ss，后台要求yyyy/MM/dd HH:mm:ss，改成一致后台才能解析
					format: 'yyyy/MM/dd HH:mm:ss'
				});
			});
			
		</script>
	</body>
</html>
